<template>
<div>
  <p>{{obj.foo}}</p>
  <button @click="inc">button</button>
</div>
</template>

<script>
import { toRefs, watchEffect } from 'vue';
export default {
  name: 'App',
  setup() {
    let obj = {
      foo: 1,
      attr: 2,
      item: 3
    };

    let trackObj = toRefs(obj);

    watchEffect(() => {
      console.log('obj.foo =', obj);
      console.log('trackObj.foo' ,trackObj);
    })

    function inc() {
      Object.keys(trackObj).forEach(function(key){
        trackObj[key].value += 1;
      });
      // 这里我们，通过修改追踪数据，来修改源数据
      console.log(obj);
      console.log(trackObj);
    }

    return {
      obj,
      inc
    };
  }
}
</script>